<!DOCTYPE html>
<html>
<head>
	<link href="../demoengine/demoengine.min.css" rel="stylesheet">
	<script src="../demoengine/demoengine.min.js" defer></script>
	<title>jQuery UI Datepicker: Style (or Highlight) Specific Dates</title>
	<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
	<style>
		.dp-highlight .ui-state-default {
			background: #484;
			color: #FFF;
		}
	</style>
</head>
<body>
	<input id="datepicker" type="text">
	<script>
		/*
		 * jQuery UI Datepicker: Style (or Highlight) Specific Dates
		 * http://salman-w.blogspot.com/2013/01/jquery-ui-datepicker-examples.html
		 */
		$(function() {
			var date1 = new Date;
			date1.setHours(0, 0, 0, 0);
			date1.setDate(10);
			var date2 = new Date;
			date2.setHours(0, 0, 0, 0);
			date2.setDate(23);
			$("#datepicker").datepicker({
				beforeShowDay: function(date) {
					return [date.getDay() < 5, date >= date1 && date <= date2 ? "dp-highlight" : ""];
				}
			});
		});
	</script>
</body>
</html>
